웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
스타일을 사용하기 위한 방법으로 SCSS에서 if 조건문을 사용하는 방법에 대하여 알아보려고 합니다. 아래는 간단한 문법입니다.
SCSS는 if 조건문을 사용하여 스타일을 적용하는 것이 가능합니다. 이 경우 일반적으로 @mixin, @include와 함께 많이 사용되는데 @include를 사용하여 전달된 파라미터 값에 if문을 사용하여 다른 스타일을 적용하기 위함입니다. 그럼 바로 알아보겠습니다.
이해를 돕기 위해서 간단한 예제를 코드를 하나 만들어보겠습니다. 아래의 @mixin를 사용한 setFontSize()는 'small' 또는 'large' 두 가지 값을 인자로 전달 받을 수 있습니다. 그리고 전달 받은 값에 따라 다른 폰트 사이즈 값을 적용하게 됩니다.
코드를 보면 살펴보면 자바스크립트의 if문과 비슷하게 사용하였습니다. $size로 전달받아 'small'인 경우 10px을 'large'인 경우에는 14px을 적용하게 됩니다. 아래처럼 p태그에 @include를 사용할 수 있을 것 입니다.
이처럼 @mixin, @include를 조건문 @if 또는 @else 등과 사용하여 좀 더 다이나믹한 스타일 구현이 가능하겠습니다.
여기까지 간단한 scss에서의 @if문 구현에 대하여 알아보았습니다.
@if 조건 {
적용할 스타일
}
적용할 스타일
}
SCSS는 if 조건문을 사용하여 스타일을 적용하는 것이 가능합니다. 이 경우 일반적으로 @mixin, @include와 함께 많이 사용되는데 @include를 사용하여 전달된 파라미터 값에 if문을 사용하여 다른 스타일을 적용하기 위함입니다. 그럼 바로 알아보겠습니다.
# @include, @mixin에 조건문 사용하는 방법
if, else이해를 돕기 위해서 간단한 예제를 코드를 하나 만들어보겠습니다. 아래의 @mixin를 사용한 setFontSize()는 'small' 또는 'large' 두 가지 값을 인자로 전달 받을 수 있습니다. 그리고 전달 받은 값에 따라 다른 폰트 사이즈 값을 적용하게 됩니다.
@mixin setFontSize($size) {
@if $size == 'small' {
font-size: 10px;
}
@else if $size == 'large' {
font-size: 14px;
}
@else {
font-size: 12px;
}
}
@if $size == 'small' {
font-size: 10px;
}
@else if $size == 'large' {
font-size: 14px;
}
@else {
font-size: 12px;
}
}
코드를 보면 살펴보면 자바스크립트의 if문과 비슷하게 사용하였습니다. $size로 전달받아 'small'인 경우 10px을 'large'인 경우에는 14px을 적용하게 됩니다. 아래처럼 p태그에 @include를 사용할 수 있을 것 입니다.
p {
@include fontSize('small'); // 10px을 적용할 경우
@include fontSize('large'); // 14px을 적용할 경우
}
@include fontSize('small'); // 10px을 적용할 경우
@include fontSize('large'); // 14px을 적용할 경우
}
이처럼 @mixin, @include를 조건문 @if 또는 @else 등과 사용하여 좀 더 다이나믹한 스타일 구현이 가능하겠습니다.
여기까지 간단한 scss에서의 @if문 구현에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
